<template>
	<view class="cancel">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'取消原因',color:'#fff'}" />
		<!-- #endif -->
		<view class="container">
			<view class="title">
				请选择取消订单原因(可多选)
			</view>
			<view class="type_list">
				<checkbox-group @change="checkboxChange">
					<label class="list_item" v-for="(item,index) in typeList" :key="index">
						<view>
							<checkbox :value="item.type_text"/>
						</view>
						<view>{{item.type_text}}</view>
					</label>
				</checkbox-group>
				<view class="remark" >
					<textarea name="remark" v-model="remark" maxlength="100" placeholder="其他原因.." placeholder-style="font-size:14px;" id="" cols="30" rows="10"></textarea>
				</view>
				<view class="tips">
					<view class="">温馨提示</view>
					<view class="">
						1、无车费 (公交地铁) : 技师出发10分钟内扣取20元作为空单费，10分钟后扣除一半项目费
					</view>
					<view class="">
						2、有车费 (滴滴/出租车) : 技师一经出发，车费不予退还，如技师到达后，还需要扣除一半项目费
					</view>
				</view>
			</view>
		</view>
		<view class="submit" @click="cancel">
			提交
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				order_id:'',
				typeList:[],		//取消类型
				subType:[],			//提交类型
				remark:'',			//其他原因
			};
		},
		onLoad(options) {
			this.order_id = options.id
			this.getTypeList()
		},
		methods:{
			checkboxChange(e){
				this.subType = e.detail.value
			},
			//获取type列表
			getTypeList(){
				this.$http({
					url: '/api/group_data/cancel_order',
					method: 'get',
					success: result => {
						console.log(result, '----------------123')
						if (result.code == 200) {
							let data = result.data.list
							this.typeList = data;
						}
					}
				})
			},
			//取消提交
			cancel(){
				if(this.subType.length < 1 && this.remark == ''){
					uni.showToast({
						title:'请至少选择一个原因或自行填写原因',
						icon:"none"
					})
					return false;
				}
				let params = {
					reason:this.subType,
					remark:this.remark
				}
				this.$http({
					url:`/api/product/order/cancel/${this.order_id}`,
					method: 'post',
					data:params,
					success: result => {
						console.log(result, '----------------123')
						if (result.code == 200) {
							uni.showToast({
								title:result.msg
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/orders/index'
								})
							},1500)
							// uni.navigateTo({
							// 	url:'/pages/orders/cancelOrder/cancelResult?result='+result.msg
							// })
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.cancel{
		width: 100%;
		height: 100%;
		.container{
			margin: 10px 20px;
			padding:20px;
			background-color: #fff;
			border-radius: 20upx;
			.title{
				text-align: center;
				margin-bottom: 20upx;
			}
			.type_list{
				.list_item{
					margin: 10upx 0;
					display: flex;
					align-items: center;
				}
				.remark{
					height: 175upx;
					margin-top: 20upx;
					background-color: #F0F0F0;
					border-radius: 20upx;
					textarea{
						width: 100%;
						font-size: 22upx;
						padding: 10upx 20upx;
						box-sizing: border-box;
						
					}
				}
				.tips{
					margin-top: 20upx;
					font-size: 22upx;
					color: #fd5c5b;
				}
			}
			
		}
		.submit{
			margin: 0 40px;
			padding: 20upx 0;
			font-size: 20px;
			background-color: #24d576;
			color: #fff;
			text-align: center;
			border-radius: 40upx;
			margin-top: -50upx;
		}
	}
</style>
